<template>
  <div>
    <!-- 交车信息 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="vehicle" label-width="120px" :rules="rules" :label-position="type =='detail'?'right':'top'" :disabled="type=='detail'">
        <div class="card-title-wrap">
          <span>交车信息</span>
          <span></span>
        </div>
        <div :style="{marginLeft: (type == 'detail'?'':'50px')}">
          <el-row>
            <el-col :span="8">
              <el-form-item label="异地还车:" prop="supplementDelivery.deliveryType">
                <el-radio-group v-model="form.supplementDelivery.deliveryType" @change="changeClear">
                  <el-radio label="2">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="预计交车日期:" prop="supplementDelivery.estimatedDeliveryTime">
                <el-date-picker style="width: 100%" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.supplementDelivery.estimatedDeliveryTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.supplementDelivery.deliveryType == '2'">
            <el-col :span="12">
              <el-form-item label="交车/还车地点:" prop="supplementDelivery.point">
                <el-cascader ref="point" @change="handleChangePointList" clearable v-model="form.supplementDelivery.point" :options="options" style="width: 70%"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:" prop="supplementDelivery.address">
                <el-input v-model="form.supplementDelivery.address" autosize type="textarea" maxlength="70" style="width: 70%"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.supplementDelivery.deliveryType == '1'">
            <el-col :span="12">
              <el-form-item label="交车地点:" prop="supplementDelivery.dropOffPoint">
                <el-cascader ref="dropOffPoint" @change="handleOffPoint" clearable v-model="form.supplementDelivery.dropOffPoint" :options="options" style="width: 70%"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:" prop="supplementDelivery.deliveryAddr">
                <el-input v-model="form.supplementDelivery.deliveryAddr" autosize type="textarea" maxlength="70" style="width: 70%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.supplementDelivery.deliveryType == '1'">
            <el-col :span="12">
              <el-form-item label="还车地点:" prop="supplementDelivery.returnTheCar">
                <el-cascader ref="returnTheCar" @change="handleReturnTheCar" clearable v-model="form.supplementDelivery.returnTheCar" :options="options" style="width: 70%"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址:" prop="supplementDelivery.returnAddr">
                <el-input v-model="form.supplementDelivery.returnAddr" autosize type="textarea" maxlength="70" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.supplementDelivery.deliveryType == '1'">
            <el-col :span="12">
              <el-form-item label="异地还车单价（元）:">
                <el-input :disabled="form.supplementDelivery.offSite?true:false" v-model="form.supplementDelivery.offSiteReturnPrice" clearable style="width: 70%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用车区域:" prop="supplementDelivery.useArea">
                <el-input v-model="form.supplementDelivery.useArea" autosize type="textarea" maxlength="70"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="form.supplementDelivery.deliveryType == '1'">
            <el-form-item label="附件上传:">
              <ImageCommon :up-type="2" info="选择附件" :limit="20" :disabled="type =='detail'" v-model="form.supplementDelivery.returnAccessory"></ImageCommon>
            </el-form-item>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
  <script>
import { treeByArea } from "@/api/cwgd/cwgdApi.js";
export default {
  name: "vehicle",
  dicts: ["ven_dee"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      options: [],
      rules: {
        supplementDelivery: {
          deliveryType: [
            { required: true, message: "请选择异地还车", trigger: "change" },
          ],
          point: [
            {
              required: true,
              message: "请选择交车/还车地点:",
              trigger: "blur",
            },
          ],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
          useArea: [
            { required: true, message: "请输入用车区域", trigger: "blur" },
          ],
          dropOffPoint: [
            { required: true, message: "请选择交车地点", trigger: "blur" },
          ],
          deliveryAddr: [
            { required: true, message: "请输入交车地址", trigger: "blur" },
          ],
          returnTheCar: [
            { required: true, message: "请选择还车地点", trigger: "blur" },
          ],
          returnAddr: [
            { required: true, message: "请输入还车地址", trigger: "blur" },
          ],
          estimatedDeliveryTime: [
            { required: true, message: "请选择时间", trigger: "change" },
          ],
        },
      },
    };
  },
  created() {
    if (this.form.orderStatus && this.form.orderStatus !== '1') {
      this.form.supplementDelivery.estimatedDeliveryTime = this.form.estimatedDeliveryTime
      this.form.supplementDelivery.address = this.form.supplementDelivery.deliveryAddr
      this.form.supplementDelivery.point = [
        this.form.supplementDelivery.deliveryProvinceId,
        this.form.supplementDelivery.deliveryCityId,
        this.form.supplementDelivery.deliveryAreaId,
      ]
      this.form.supplementDelivery.dropOffPoint = [
        this.form.supplementDelivery.deliveryProvinceId,
        this.form.supplementDelivery.deliveryCityId,
        this.form.supplementDelivery.deliveryAreaId,
      ];
      this.form.supplementDelivery.returnTheCar = [
        this.form.supplementDelivery.returnProvinceId,
        this.form.supplementDelivery.returnCityId,
        this.form.supplementDelivery.returnAreaId,
      ];
    }
    this.treeByArea();
  },
  methods: {
    changeClear() {
      //   this.form.supplementDelivery.point = [];
      //   this.form.supplementDelivery.dropOffPoint = [];
      //   this.form.supplementDelivery.returnTheCar = [];
      //   this.form.supplementDelivery.offSiteReturnPrice = "";
      //   this.form.supplementDelivery.address = "";
      //   this.form.supplementDelivery.deliveryAddr = "";
      //   this.form.supplementDelivery.returnAddr = "";
    },
    // 交车/还车
    handleChangePointList() {
      const checkedNodes = this.$refs["point"].getCheckedNodes(); // 获取当前点击的节点s
      this.form.supplementDelivery.deliveryProvinceName =
        checkedNodes[0].pathLabels[0];
      this.form.supplementDelivery.deliveryCityName =
        checkedNodes[0].pathLabels[1];
      this.form.supplementDelivery.deliveryAreaName =
        checkedNodes[0].pathLabels[2];
      this.form.supplementDelivery.returnProvinceName =
        checkedNodes[0].pathLabels[0];
      this.form.supplementDelivery.returnCityName =
        checkedNodes[0].pathLabels[1];
      this.form.supplementDelivery.returnAreaName =
        checkedNodes[0].pathLabels[2];
    },
    // 交车
    handleOffPoint() {
      const checkedNodes = this.$refs["dropOffPoint"].getCheckedNodes(); // 获取当前点击的节点s
      this.form.supplementDelivery.deliveryProvinceName =
        checkedNodes[0].pathLabels[0];
      this.form.supplementDelivery.deliveryCityName =
        checkedNodes[0].pathLabels[1];
      this.form.supplementDelivery.deliveryAreaName =
        checkedNodes[0].pathLabels[2];
    },
    // 还车
    handleReturnTheCar() {
      const checkedNodes = this.$refs["returnTheCar"].getCheckedNodes(); // 获取当前点击的节点s
      this.form.supplementDelivery.returnProvinceName =
        checkedNodes[0].pathLabels[0];
      this.form.supplementDelivery.returnCityName =
        checkedNodes[0].pathLabels[1];
      this.form.supplementDelivery.returnAreaName =
        checkedNodes[0].pathLabels[2];
    },
    clearAllChildren(items, childrenName = "children") {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        // 当前对象存在children
        if (item && item[childrenName]) {
          // children为空数组时删除
          if (item[childrenName].length === 0) {
            delete item[childrenName];
          } else {
            // 递归当前children数组
            this.clearAllChildren(item[childrenName], childrenName);
          }
        }
      }
      return items;
    },
    treeByArea() {
      treeByArea({ regionLevel: this.query }).then((res) => {
        if (res.code == "200") {
          this.options = this.clearAllChildren(res.data);
        }
      });
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
